<template>
  <div class="tj">
    <div v-for="(item, index) in list" :key="index">
      <div><img :src="item.headUrl" alt="xxx" /></div>
      <div class="main">
        <div class="pro" v-for="(items, indexs) in item.list" :key="indexs">
          <p>{{ items.title }}</p>
          <span>{{ items.desc }}</span>
          <van-grid :border="false" :column-num="2">
            <van-grid-item>
              <van-image :src="items.products[0].imgUrl" />
            </van-grid-item>
            <van-grid-item>
              <van-image :src="items.products[1].imgUrl" />
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { homeFloorlist } from "../../api/index";
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    homeFloorlist((res) => {
      this.list = res.data;
    });
  },
};
</script>

<style lang="scss" scoped>
img {
  width: 100%;
  height: 80px;
  background: #f6f6f6;
}
.tj {
  margin-bottom: 100px;
}
.main {
  display: flex;
  flex-wrap: wrap;

  .pro {
    display: flex;
    flex-wrap: wrap;
    width: 50%;
    padding: 20px;
    border-right: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    box-sizing: border-box;

    p {
      width: 100%;
      font-size: 34px;
      color: #333;
    }

    span {
      padding: 10px 0;
      font-size: 26px;
      color: red;
    }
  }
}
</style>